import { computed, defineComponent, ref } from 'vue'
import { Button, Modal, Spin } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { cloneDeep } from 'lodash-es'
import FilterComponent from './filterComponent/filterComponent'
import { FormComponentKey } from '@/enums/componentKey'
import { isEmptyObject } from '@/utils/is'

export default defineComponent({
  name: 'FilterConditions',
  inheritAttrs: false,
  props: {
    fieldList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:filterConfig'],
  setup(props, { emit }) {
    const { t } = useI18n({
      messages: {
        'zh-CN': {
          filter: '筛选',
          configureFilterCriteria: '配置筛选条件'
        },
        'en-US': {
          filter: 'Filter',
          configureFilterCriteria: 'Configure Filter Criteria'
        }
      }
    })

    const showMoreConfig = ref(false)
    const openLoading = ref(false)
    const conditionRef = ref()
    const config = ref<FormItemVisibleCondition>({})
    const currFormFiledList = ref<FiledListType[]>([])

    const handleOpenModal = () => {
      showMoreConfig.value = true
    }

    const handleModalCancel = () => {
      showMoreConfig.value = false
    }

    const handleModalConfirm = () => {
      conditionRef.value
        ?.handleValidate()
        .then(val => {
          showMoreConfig.value = false
          emit('update:filterConfig', {
            config: cloneDeep(val)
          })
        })
        .catch(val => {
          if (isEmptyObject(val) || val.children?.length === 0) {
            showMoreConfig.value = false
            emit('update:filterConfig', {
              config: cloneDeep(val)
            })
          }
        })
    }

    const filterDynamicFieldFunc = (columnInfo, dynamicFieldList) => {
      if (columnInfo.type === 'INTEGER') {
        return dynamicFieldList.filter(item => item.type === 'INTEGER')
      }
      return dynamicFieldList.filter(
        item =>
          item.type === 'TEXT' ||
          item.componentKey === FormComponentKey.AntdSelectFormPc ||
          item.componentKey === FormComponentKey.AntdTreeSelectFormPc ||
          item.componentKey === FormComponentKey.AntdRadioGroupFormPc
      )
    }
    return () => {
      return (
        <>
          <Button class="float-right mb-2" type="primary" size="small" onClick={handleOpenModal}>
            {t('filter')}
          </Button>
          <Modal
            v-model:visible={showMoreConfig.value}
            title={t('configureFilterCriteria')}
            destroyOnClose
            width={800}
            onOk={handleModalConfirm}
            onCancel={handleModalCancel}
          >
            <Spin spinning={openLoading.value}>
              <FilterComponent
                ref={conditionRef}
                style="overflow-y: scroll;"
                class="h-[400px]"
                fieldList={props.fieldList}
                condition={config.value}
                dynamicFieldList={currFormFiledList.value}
                filterDynamicFieldFunc={filterDynamicFieldFunc}
              />
            </Spin>
          </Modal>
        </>
      )
    }
  }
})
